<template>
  <span v-if="readonly">
    <slot name="flowName" :flow="flow">
      {{ flowName }}
    </slot>
  </span>
  <div v-else>
    <el-input v-model="flowName" :readonly="true" :placeholder="placeholder">
      <template #append>
        <BaseButton size="small" :icon="dropIcon" @click="clear" />
        <BaseButton size="small" :icon="editIcon" @click="openForm" />
        <BaseButton
          v-if="value != null && type != 2"
          size="small"
          :icon="viewIcon"
          @click="openView"
        />
      </template>
    </el-input>
    <flowChiose
      v-model="flowId"
      :title="placeholder"
      :flow-type="flowType"
      v-model:visible="visible"
      @change="save"
    />
  </div>
</template>

<script>
import flowChiose from './flowChiose.vue'
import { Get } from '@/flow/api/flow'
import { useIcon } from '@/hooks/web/useIcon'
export default {
  components: {
    flowChiose
  },
  props: {
    flowType: {
      type: String,
      default: null
    },
    placeholder: {
      type: String,
      default: null
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    modelValue: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      dropIcon: useIcon({ icon: 'ep:delete' }),
      editIcon: useIcon({ icon: 'ep:edit' }),
      viewIcon: useIcon({ icon: 'ep:view' }),
      flowName: null,
      flowId: null,
      flow: null,
      visible: false
    }
  },
  computed: {},
  watch: {
    modelValue: {
      handler(val) {
        if (val && val !== '') {
          this.reset()
        } else {
          this.flowId = null
          this.flow = null
          this.flowName = null
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    async reset() {
      this.flow = await Get(this.modelValue)
      this.flowName = this.flow.FlowName
      this.flowId = this.modelValue
    },
    openForm() {
      this.visible = true
    },
    save(flowId, flow) {
      this.flow = flow
      if (this.form == null) {
        this.formName = null
      } else {
        this.flowName = this.flow.FlowName
      }
      this.$emit('update:modelValue', flowId)
      this.$emit('change', flowId, flow)
    }
  }
}
</script>
<style scoped>
.icon {
  font-size: 20px;
  margin-right: 5px;
}
</style>
